<template>
  <div>
    <h2 align="center">用户借款还款</h2>
    <table class="table table-bordered">
      <tr>
        <td>借款款项名称:</td>
        <td>
          {{list.B_Name}}
        </td>
      </tr>

      <tr>
        <td>最高最高金额:</td>
        <td>
          {{ list.B_Money }}CNY
        </td>
      </tr>

      <tr>
        <td>利息:</td>
        <td>
          {{ list.BI_Number*100 }}%
        </td>
      </tr>

      <tr>
        <td>借款金额:</td>
        <td>
           {{ list.UB_Money }}CNY
        </td>
      </tr>

      <tr>
        <td>利息:</td>
        <td>
          {{ (list.UB_Money*list.BI_Number).toFixed(2) }}CNY
        </td>
      </tr>

      <tr>
        <td>应还款(本+利):</td>
        <td>
           {{ (list.UB_Money+list.UB_Money*list.BI_Number).toFixed(2) }}CNY
        </td>
      </tr>

      <tr>
        <td>还款金额:</td>
        <td>
          <input type="text" v-model="UBR_Money">CNY
        </td>
      </tr>

      <tr>
        <td></td>
        <td>
          <input type="button" @click="SuerBackBorrow" value="借款还款" class="btn btn-primary">
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">

import {onMounted, reactive,toRefs} from 'vue';

import { useRouter,useRoute } from 'vue-router';

import axios from 'axios';

import {useUserStore} from '../../store/user'
let userStore = useUserStore();

//路由
let router = useRouter();
let route = useRoute();

//响应式数据
let data:any =reactive({
  list:[],
  //还款金额
  UBR_Money:''
})

//解构
let {list,UBR_Money} = toRefs(data);

//生命周期钩子函数
//页面加载时
onMounted(()=>{
  getData()
})

//反填
const getData=()=>{
  axios({
    url:'/api/Borrow/GetUserRedeemInfo',
    method:'get',
    params:{
      UB_Id:route.query.UB_Id
    }
  }).then((res)=>{
    console.log(res);
    
    list.value = res.data.data[0]
  }).catch(err=>{
    console.log(err);
  })
}

//确认还款
const SuerBackBorrow =()=>{
  //非空验证
  //有效性验证
  if(UBR_Money.value==''){
    return alert('还款金额不能为空')
  }
  if(isNaN(UBR_Money.value)){
    return alert('还款金额必须为数字') 
  }
  //提交数据
  axios({
    url:'/api/Borrow/PostAddUserRedeemInfo',
    method:'post',
    data:{
      UB_Id:route.query.UB_Id,
      UBR_Money:UBR_Money.value,
    }
  }).then(res=>{
    console.log(res);
    if(res.data.data>0){
      alert('还款成功')
      router.push('/main/userBorrowRedeemList')
    }else{
      return alert('还款失败')
    }
  }).catch(err=>{
    console.log(err);
    
  })
}

</script>

<style scoped>

</style>